<template>
	<view class="vehicle">
		<view class="top">
			<view class="left">
				<u-icon name="car" :size="30" color="rgb(94,94,94)"></u-icon>
				<view class="car-type">{{car.carType}}</view>
				<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
				<view class="car-type">{{car.carCode}}</view>
			</view>
			<view class="right">车辆状态:{{car.state | statusFilter}}</view>
		</view>
		<u-line class="u-line" border-style="solid" color="#584d56" :hair-line="true"/>
		<view class="car-item">
			<view class="left">
				<image :src="car.carUrl" mode="aspectFit"></image>
			</view>
			<view class="content">
				<view class="title u-line-2"> 车辆名字:{{car.carName}} </view>
				<view class="title u-line-2"> 载重量 {{car.loadCapacity}} 吨</view>
				<view class="title u-line-2"> 容量体积 {{car.volumeCapacity}} m³</view>
				<view class="create-time">驾驶员 {{car.driverName}}</view>
			</view>
		</view>
		<view class="bottom">
			<view class="logistics btn" @click="edit" v-if="car.state == 3 || car.state == 4">修改信息</view>
			<view class="exchange btn" @click="deleteCar">删除车辆</view>
		</view>
	</view>
</template>

<script>
	import {getInfoRequest} from '../../../../api/driver/vehicle.js'
	export default{
		props:{
			car:{
				type: Object,
				default() {
					return {}
				}
			},
			tab:{
				type: Number,
				default() {
					return 0
				}
			}
		},
		filters: {
		    statusFilter(status) {
		      const statusMap = {
		        0: '禁用',
		        1: '锁定',
		        2: '审核中',
		        3: '正在使用',
		        4: '空闲',
				5: '驳回'
		      }
		      return statusMap[status]
		    }
		},
		data() {
			return {
				
			}
		},
		methods:{
			edit(){
				this.$store.dispatch('vehicle/CHANGETYPE','edit');
				getInfoRequest(this.car.carCode)
				.then(res => {
					if (res.header.code === 200){
						this.$store.dispatch('vehicle/CHANGECURRENTCAR',{car:res.body,tab:this.tab})
						.then(res => {
							this.$store.dispatch('vehicle/CHANGEINFOWINDOW',true);
						})
					}
				})
				
			},
			deleteCar() {
				this.$store.dispatch('vehicle/CHANGECURRENTCAR',{car:this.car})
				this.$emit('deleteCar');
			}
		}
	}
</script>

<style lang="scss">
	.vehicle {
		width: 98%;
		background-color: #ffffff;
		margin: 10rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
	
		.top {
			display: flex;
			justify-content: space-between;
	
			.left {
				display: flex;
				align-items: center;
	
				.car-type {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-info;
			}
	
		}
		
		.u-line{
			height: 10rpx;
		}
		
		.car-item {
			display: flex;
			margin: 20rpx 0 0;
			width: 100%;
			.left {
				margin-right: 20rpx;
	
				image {
					width: 250rpx;
					height: 250rpx;
					border-radius: 10rpx;
				}
			}
	
			.content {
				width: 100%;
				text-align: right;
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
	
	
				.create-time {
					color: $u-type-warning-disabled;
					font-size: 28rpx;
					line-height: 50rpx;
				}
			}
		}
	
	
		.bottom {
			display: flex;
			margin-top: 10rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;
	
			.btn {
				line-height: 52rpx;
				margin-left: 10rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}
	
		}
	}
</style>
